import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import 'antd/dist/reset.css'
import './index.css'

// 最简单的React组件，不使用任何路由
function SimpleApp() {
  console.log('SimpleApp组件开始渲染');
  
  return (
    <div style={{
      width: '100vw',
      height: '100vh',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      fontFamily: 'Arial, sans-serif'
    }}>
      <div style={{
        background: 'white',
        padding: '40px',
        borderRadius: '12px',
        boxShadow: '0 10px 30px rgba(0,0,0,0.2)',
        textAlign: 'center',
        maxWidth: '600px'
      }}>
        <h1 style={{ 
          color: '#1890ff', 
          marginBottom: '20px',
          fontSize: '32px'
        }}>
          🎉 React应用成功运行！
        </h1>
        
        <div style={{
          background: '#f6ffed',
          border: '1px solid #b7eb8f',
          borderRadius: '8px',
          padding: '20px',
          marginBottom: '20px',
          textAlign: 'left'
        }}>
          <h3 style={{ color: '#52c41a', marginTop: 0 }}>✅ 系统状态检查</h3>
          <p style={{ margin: '8px 0', color: '#52c41a' }}>✓ React 19.1.1 正常加载</p>
          <p style={{ margin: '8px 0', color: '#52c41a' }}>✓ Vite 开发服务器正常</p>
          <p style={{ margin: '8px 0', color: '#52c41a' }}>✓ JSX 语法正常编译</p>
          <p style={{ margin: '8px 0', color: '#52c41a' }}>✓ 组件渲染成功</p>
          <p style={{ margin: '8px 0', color: '#52c41a' }}>✓ CSS 样式正常应用</p>
          <p style={{ margin: '8px 0', color: '#52c41a' }}>✓ ES6 模块导入正常</p>
        </div>
        
        <div style={{
          background: '#fff7e6',
          border: '1px solid #ffd591',
          borderRadius: '8px',
          padding: '15px',
          marginBottom: '20px'
        }}>
          <p style={{ margin: '5px 0', color: '#fa8c16' }}>
            ⚠️ 这是一个简化版本，绕过了React Router和复杂组件
          </p>
          <p style={{ margin: '5px 0', color: '#fa8c16' }}>
            如果你能看到这个页面，说明React基础功能正常
          </p>
        </div>
        
        <div style={{ marginTop: '20px' }}>
          <button 
            onClick={() => {
              console.log('按钮点击事件触发');
              alert('React事件处理正常工作！');
            }}
            style={{
              background: '#1890ff',
              color: 'white',
              border: 'none',
              padding: '12px 24px',
              borderRadius: '6px',
              cursor: 'pointer',
              fontSize: '16px',
              marginRight: '10px'
            }}
          >
            测试点击事件
          </button>
          
          <button 
            onClick={() => {
              window.location.href = '/console-debug.html';
            }}
            style={{
              background: '#52c41a',
              color: 'white',
              border: 'none',
              padding: '12px 24px',
              borderRadius: '6px',
              cursor: 'pointer',
              fontSize: '16px',
              marginRight: '10px'
            }}
          >
            打开调试工具
          </button>
          
          <button 
            onClick={() => {
              window.location.reload();
            }}
            style={{
              background: '#722ed1',
              color: 'white',
              border: 'none',
              padding: '12px 24px',
              borderRadius: '6px',
              cursor: 'pointer',
              fontSize: '16px'
            }}
          >
            重新加载页面
          </button>
        </div>
        
        <div style={{
          marginTop: '20px',
          padding: '15px',
          background: '#f0f5ff',
          borderRadius: '6px',
          fontSize: '14px',
          color: '#666'
        }}>
          <p style={{ margin: 0 }}>
            时间: {new Date().toLocaleString()} | 
            用户代理: {navigator.userAgent.split(' ')[0]}
          </p>
        </div>
      </div>
    </div>
  );
}

console.log('开始初始化React应用...');

try {
  const rootElement = document.getElementById('root');
  if (!rootElement) {
    throw new Error('找不到根元素 #root');
  }
  
  console.log('找到根元素，创建React根节点...');
  const root = createRoot(rootElement);
  
  console.log('渲染React应用...');
  root.render(
    <StrictMode>
      <SimpleApp />
    </StrictMode>
  );
  
  console.log('React应用渲染完成');
} catch (error) {
  console.error('React应用初始化失败:', error);
  
  // 如果React渲染失败，显示错误信息
  const rootElement = document.getElementById('root');
  if (rootElement) {
    rootElement.innerHTML = `
      <div style="
        padding: 40px;
        text-align: center;
        font-family: Arial, sans-serif;
        background: #fff2f0;
        border: 1px solid #ffccc7;
        border-radius: 8px;
        margin: 20px;
        color: #ff4d4f;
      ">
        <h2>❌ React应用初始化失败</h2>
        <p>错误信息: ${error.message}</p>
        <p>请检查浏览器控制台获取详细信息</p>
        <button onclick="window.location.reload()" style="
          background: #ff4d4f;
          color: white;
          border: none;
          padding: 10px 20px;
          border-radius: 4px;
          cursor: pointer;
        ">重新加载页面</button>
      </div>
    `;
  }
}